<template>
  <div class="dispatchorder">
    <div class="dispatchleft">
      <div class="configcenter">
        <div class="title">派单</div>
        <div class="baseconfig">基础配置</div>
      </div>
    </div>
    <div class="dispatchcenter">
      <div>同一员工两笔订单派单间隔时长设置：上一单工单完成后 <el-input v-model="repeatLeafTime" placeholder=""></el-input> 分钟后可继续派单。</div>
      <div>已迟到配置：员工选再用户预约时间点前 <el-input v-model="arriveEarly" placeholder=""></el-input> 分钟到达，过后则为已迟到状态。</div>
      <div>
        <span>虚拟员工数配置：</span>
        <el-input
          v-model="virtualEmployeeNum"
          placeholder="输入数量"
          class="input"
        ></el-input>
      </div>
    </div>
    <div class="dispatchright">
      <div class="save" @click="save">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    systemConfigSendOrderVo: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      arriveEarly: '',
      repeatLeafTime: '',
      configType: 'system_config_send_orders',
      id: '',
      virtualEmployeeNum: ''
    }
  },
  methods: {
    async save() {
      // 校验数字
      if(this.arriveEarly) {
        const num = Number(this.arriveEarly)
        if(isNaN(num)){
          this.$message.error('用户预约时间点提前到达时间必须为数字')
          return false
        }
      }
      if(this.repeatLeafTime) {
        const num = Number(this.repeatLeafTime)
        if(isNaN(num)) {
          this.$message.error('上一单工单完成后可继续派单时间必须为数字')
          return false
        }
      }
      if(this.virtualEmployeeNum) {
        const num = Number(this.virtualEmployeeNum)
        if (isNaN(num)) {
          this.$message.error("虚拟员工数配置必须为数字");
          return false
        }
        const reg = /^\d+$/
        if(!reg.test(this.virtualEmployeeNum)) {
          this.$message.error("虚拟员工数配置必须正整数")
          return false
        }
      }
      const data = {
        systemConfigSendOrderVo: {
          configType: this.configType,
          arriveEarly: this.arriveEarly,
          repeatLeafTime: this.repeatLeafTime,
          virtualEmployeeNum: this.virtualEmployeeNum
        }
      }
      if(this.id) {
        data.systemConfigSendOrderVo.id = this.id
      }
      await this.$http({
        url: '/hsssystemadmin/config/system/updateSystemConfig',
        method: 'post',
        data
      }).then(res => {
        this.$message.success('派单基础配置数据保存成功')
        this.$emit('research')
      }).catch(err =>{
        this.$message.err('派单基础配置数据保存失败')
      })
    }
  },
  watch: {
    systemConfigSendOrderVo(newvalue) {
      if(newvalue) {
        this.arriveEarly = newvalue.arriveEarly
        this.repeatLeafTime = newvalue.repeatLeafTime
        this.configType = newvalue.configType
        this.id = newvalue.id
        this.virtualEmployeeNum = newvalue.virtualEmployeeNum
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dispatchorder{
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  .dispatchleft{
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .configcenter{
      width: 100px;
      height: 70px;
      .title{
        width: 100%;
        height: 35px;
        text-align: center;
        font-size: 22px;
        color: #fff;
        background-color: #f56a23;
        line-height: 35px;
      }
      .baseconfig{
        width: 100%;
        height: 35px;
        font-size: 22px;
        text-align: center;
        color: #aaa;
      }
    }
  }
  .dispatchright{
    font-size: 22px;
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .save{
      width: 70px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      background-color: #00cb75;
    }
  }
  .dispatchcenter{
    div{
      margin-bottom: 5px;
    }
    font-size: 12px;
    padding: 20px;
    box-sizing: border-box;
    flex: 1;
    margin-left: 10px;
    margin-right: 10px;
    min-height: 150px;
    background-color: #fff;
    /deep/ .el-input{
      width: 60px;
      height: 30px;
      box-sizing: border-box;
      .el-input__inner{
        width: 60px;
        height: 30px;
        font-size: 12px;
        text-align: center;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
/deep/ .input{
  width: 100px!important;
  .el-input__inner{
    width: 100px!important;
  }
}
</style>